<template>
  <div>
    <div class="modal-header">
      <div class="modal-title">{{ l('ChangePassword') }}</div>
    </div>
    <slot></slot>
    <div class="modal-body">
      <a-form :model="form" @submit="save" ref="formRef" :rules="rules" layout="vertical">
        <!-- 当前密码 -->

        <a-form-item :label="l('CurrentPassword')" has-feedback name="password">
          <a-input type="password" v-model:value="form.password" />
        </a-form-item>
        <!-- 新密码 -->
        <a-form-item :label="l('NewPassword')" has-feedback name="NewPassword">
          <a-input type="password" v-model:value="form.NewPassword" />
        </a-form-item>
        <!-- 确认新密码 -->
        <a-form-item has-feedback :label="l('ConfirmPassword')" name="confirmNewPassword">
          <a-input type="password" v-model:value="form.confirmNewPassword" />
        </a-form-item>
      </a-form>
    </div>
    <!-- 功能按钮 -->
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" nz-button type="button">
        {{ l('Cancel') }}
      </a-button>
      <a-button html-type="submit" :loading="saveLoading" @click="save" type="primary">
        {{ l('Save') }}
      </a-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { ChangePasswordInput, ProfileServiceProxy } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'change-password',
    mixins: [ModalComponentBase],
    data() {
      return {
        form: {
          password: '',
          NewPassword: '',
          confirmNewPassword: '',
        },
        profileService: new ProfileServiceProxy(),
        confirmNewPasswordVal: null,
        inputVal: new ChangePasswordInput(),
        saveLoading: false,
        rules: {
          password: [
            {
              required: true,
              message: this.l('PleaseEnterYourOriginalPassword'),
            },
          ],
          NewPassword: [
            {
              required: true,
              message: this.l('PleaseEnterAnewPassword'),
            },
            {
              min: 6,
              message: this.l('MinLength', 6),
              trigger: 'blur',
            },
            {
              max: 32,
              message: this.l('MaxLength', 32),
              trigger: 'blur',
            },
          ],
          confirmNewPassword: [
            {
              validator: this.validateEqual,
              trigger: 'blur',
            },
          ],
        },
      };
    },
    created() {
      this.profileService = new ProfileServiceProxy(this.$apiUrl, this.$api);
      this.inputVal = new ChangePasswordInput();
    },
    computed: {},
    methods: {
      getPageData(data) {
        console.log('pageData', data);
      },
      /**
       * 验证密码
       */
      validateEqual() {
        if (this.form.confirmNewPassword === '') {
          return Promise.reject(this.l('PleaseInputThePasswordAgain'));
        } else if (this.form.confirmNewPassword !== this.form.NewPassword) {
          return Promise.reject(this.l('TwoInputsDonotMatch'));
        } else {
          return Promise.resolve();
        }
      },
      save(e) {
        e.preventDefault();
        (this.$refs.formRef as any).validate().then(() => {
          this.saveLoading = true;
          this.inputVal.currentPassword = this.form.password;
          this.inputVal.newPassword = this.form.NewPassword;
          this.profileService
            .changePassword(this.inputVal)
            .finally(() => {
              this.saveLoading = false;
            })
            .then(() => {
              this.saveLoading = false;
              this.notify.success(this.l('YourPasswordHasChangedSuccessfully'));
              this.success();
            });
        });
      },
    },
  });
</script>

<style scoped lang="less">
  .modal-body {
    padding: 0 130px;
  }
</style>
